var TMap = window.TMap;
// import TMap from "TMap";
export let _AMap = null;
export let MapCenter = null;
export let markerList = [];

let oldLine = null,
  markObj = null,
  lineObj = null,
  label = null;
/**
 * @name 初始化坐标
 * @param {*} lng
 * @param {*} lat
 * @param {*} ele
 */
export function markerLayer(mapsarray, flag) {
  if (flag && lineObj) {
    lineObj.remove(oldLine);
  }

  //创建并初始化MultiMarker
  var marr = [];
  var labelarr = [];
  mapsarray.map(function(value) {
    marr.push({
      id: value.id, //点标记唯一标识，后续如果有删除、修改位置等操作，都需要此id
      styleId: "myStyle", //指定样式id
      position: new TMap.LatLng(value.address[0], value.address[1]), //点标记坐标位置
      properties: {
        //自定义属性
        title: "mark",
      },
    });
    labelarr.push({
      id: value.id, //点图形数据的标志信息
      styleId: "label", //样式id
      position: new TMap.LatLng(value.address[0], value.address[1]), //标注点位置
      content: value.title, //标注文本
      properties: {
        //标注点的属性数据
        title: "label",
      },
      rank: value.id,
    });
  });
  if (markObj) {
    markObj.setMap(null);
  }
  markObj = new TMap.MultiMarker({
    map: _AMap, //指定地图容器
    //样式定义
    styles: {
      //创建一个styleId为"myStyle"的样式（styles的子属性名即为styleId）
      myStyle: new TMap.MarkerStyle({
        width: 25, // 点标记样式宽度（像素）
        height: 35, // 点标记样式高度（像素）
        // "src": 'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fbpic.588ku.com%2Felement_pic%2F18%2F05%2F18%2F15100a8816ed01f1930106571d0256e6.jpg&refer=http%3A%2F%2Fbpic.588ku.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1613124890&t=b8ad6e2762e89b0d134ab51ef8bc1d2e', //图片路径
        //焦点在图片中的像素位置，一般大头针类似形式的图片以针尖位置做为焦点，圆形点以圆心位置为焦点
        anchor: {
          x: 16,
          y: 32,
        },
      }),
    },

    //点标记数据数组
    geometries: marr,
  });
  if (label) {
    label.setMap(null);
  }
  label = new TMap.MultiLabel({
    id: "label-layer",
    map: _AMap,
    enableCollision: true,
    styles: {
      label: new TMap.LabelStyle({
        color: "#333", //颜色属性
        size: 18, //文字大小属性
        offset: {
          x: 0,
          y: 0,
        }, //文字偏移属性单位为像素
        angle: 0, //文字旋转属性
        alignment: "center", //文字水平对齐属性
        verticalAlignment: "middle", //文字垂直对齐属性
      }),
    },
    geometries: labelarr,
  });
}

export function destroyMap() {
  if (lineObj) lineObj.destroy();
  if (markObj) markObj.destroy();
  oldLine = null;
  markObj = null;
  lineObj = null;
  label = null;
}

export function gzpolyline(mapsarray, id) {
  var parray = [];
  mapsarray.map(function(value) {
    parray.push(new TMap.LatLng(value.mer_latitude, value.mer_longitude));
  });
  if (lineObj) {
    lineObj.remove(oldLine);
    oldLine = id;
    lineObj.add({
      id,
      styleId: "style_blue", //绑定样式名
      paths: [parray],
    });
  } else {
    oldLine = id;
    lineObj = new TMap.MultiPolyline({
      id: "polyline-layer", //图层唯一标识
      map: _AMap, //绘制到目标地图
      //折线样式定义
      styles: {
        style_blue: new TMap.PolylineStyle({
          color: "#3777FF", //线填充色
          width: 1, //折线宽度
          borderWidth: 1, //边线宽度
          borderColor: "#3777FF", //边线颜色
          lineCap: "round", //线端头方式
        }),
      },
      //折线数据定义
      geometries: [
        {
          //第1条线
          id, //折线唯一标识，删除时使用
          styleId: "style_blue", //绑定样式名
          paths: [parray],
        },
      ],
    });
  }
}
export function setMapCenter(lng, lat) {
  var center = new TMap.LatLng(lat, lng); //设置中心点坐标
  MapCenter = center;
  _AMap.setCenter(MapCenter);
  _AMap.zoomTo(15);
}
export function initAMap(lng, lat, ele) {
  var center = new TMap.LatLng(lat, lng); //设置中心点坐标
  MapCenter = center;
  //初始化地图
  _AMap = new TMap.Map(ele, {
    center: center,
    zoom: 15,
  });
  new TMap.ImageTileLayer({
    getTileUrl: function(x, y, z) {
      //拼接瓦片URL
      var url =
        window.location.protocol +
        "//" +
        window.location.host +
        "/wp/" +
        z +
        "/" +
        x +
        "_" +
        y +
        ".png";
      return url;
    },
    tileSize: 256, //瓦片像素尺寸
    minZoom: 8, //显示自定义瓦片的最小级别
    maxZoom: 18, //显示自定义瓦片的最大级别
    visible: true, //是否可见
    zIndex: 5000, //层级高度（z轴）
    opacity: 0.98, //图层透明度：1不透明，0为全透明
    map: _AMap, //设置图层显示到哪个地图实例中
  });
  setTimeout(() => {
    let container = window.document.getElementsByClassName("map");
    container = container ? container[0] : null;
    container &&
      container.addEventListener("mousewheel", function(e) {
        e.stopPropagation();
        return false;
      });
  }, 1000);
}

export function clearExample() {
  oldLine = null;
  markObj = null;
  lineObj = null;
}

/**
 * @name 添加自定义窗体
 * @param { Array } HTMLArr 窗口模板数组
 * @return {Array}
 */
// export function handlesInfoWindow(HTMLArr) {
//     return HTMLArr.map( html => {
//         return new AMap.InfoWindow({
//             isCustom: true,  //使用自定义窗体
//             content: createInfoWindow(title,content),  //传入 dom 对象，或者 html 字符串
//             offset: new AMap.Pixel(16, -50)
//         });
//     })

// }

/**
 * @name 构建自定义信息窗体
 * @param {String} title
 * @param {Array} content
 */
// function createInfoWindow(title, content) {
//     var info = document.createElement("div");
//     info.className = "custom-info input-card content-window-card";

//     //可以通过下面的方式修改自定义窗体的宽高
//     //info.style.width = "400px";
//     // 定义顶部标题
//     var top = document.createElement("div");
//     var titleD = document.createElement("div");
//     var closeX = document.createElement("img");
//     top.className = "info-top";
//     titleD.innerHTML = title;
//     closeX.src = "https://webapi.amap.com/images/close2.gif";
//     closeX.onclick = closeInfoWindow;

//     top.appendChild(titleD);
//     top.appendChild(closeX);
//     info.appendChild(top);

//     // 定义中部内容
//     var middle = document.createElement("div");
//     middle.className = "info-middle";
//     middle.style.backgroundColor = 'white';
//     middle.innerHTML = content;
//     info.appendChild(middle);

//     // 定义底部内容
//     var bottom = document.createElement("div");
//     bottom.className = "info-bottom";
//     bottom.style.position = 'relative';
//     bottom.style.top = '0px';
//     bottom.style.margin = '0 auto';
//     var sharp = document.createElement("img");
//     sharp.src = "https://webapi.amap.com/images/sharp.png";
//     bottom.appendChild(sharp);
//     info.appendChild(bottom);
//     return info;
// }

//关闭信息窗体

// function closeInfoWindow() {
//     _AMap.clearInfoWindow();
// }
